<template>
  <div class="app-container">
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">通用优惠券管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card>
      <el-form :inline="true" class="demo-form-inline" :model="data">
        <el-form-item label="优惠券名：">
          <el-input v-model.trim="data.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用限制：">
          <el-select v-model="data.use_restrictions" placeholder="请选择限制区域">
            <el-option label="不限制" value="不限制" />
            <el-option label="同城配送" value="同城配送" />
            <el-option label="到店自取" value="到店自取" />
            <el-option label="区域配送" value="区域配送" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refer">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addData">+新增</el-button>
      <template>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-bottom: 20px;">
          <el-table-column type="selection" width="55" />
          <el-table-column label="名称" width="120" prop="name" />
          <el-table-column label="优惠金额/元" width="120" prop="amt" />
          <el-table-column label="使用限制" width="120" prop="use_restrictions" />
          <el-table-column label="使用期限" width="120" prop="use_date" />
          <el-table-column label="领取限制/张" width="120" prop="tot_issued" />
          <el-table-column label="发放数量/张" width="120" prop="quantity_issued" />
          <el-table-column label="领取金额/元" width="120">
            <template #default="{row}">
              {{ row.quantity_issued * row.amt }}
            </template>
          </el-table-column>
          <el-table-column label="剩余数量/张" width="120" prop="name">
            <template #default="{row}">
              {{ row.tot_issued - row.quantity_issued }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{row}">
              <el-button type="text" @click="edit(row.id)">编辑</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        :current-page="page.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="changePage"
        @size-change="sizeChange"
      />
      <el-dialog :title="showText" :visible="dialogTableVisible" @close="changeDialog">
        <el-form ref="form" label-width="100px" :rules="rules" :model="formData">
          <el-form-item label="优惠券名称" prop="name">
            <el-input v-model.trim="formData.name" type="text" style="80%" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="优惠券金额" prop="amt">
            <el-input v-model.trim="formData.amt" type="text" style="80%" :disabled="disabled" />
          </el-form-item>
          <el-form-item label="使用限制" prop="use_restrictions">
            <el-select
              v-model="formData.use_restrictions"
              placeholder="请选择限制区域"
              :disabled="disabled"
            >
              <el-option label="不限制" value="不限制" />
              <el-option label="同城配送" value="同城配送" />
              <el-option label="到店自取" value="到店自取" />
              <el-option label="区域配送" value="区域配送" />
            </el-select>
          </el-form-item>
          <el-form-item label="使用期限" prop="use_date">
            <el-input
              v-model.trim="formData.use_date"
              type="text"
              style="80%"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="领取限制" prop="tot_issued">
            <el-input
              v-model.trim="formData.tot_issued"
              type="text"
              style="80%"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="发放数量" prop="quantity_issued">
            <el-input v-model.trim="formData.quantity_issued" type="text" style="80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-row type="flex" justify="center">
            <el-col :span="4.5">
              <el-button size="small" @click="changeDialog">取消</el-button>
              <el-button type="primary" size="small" @click="btnOK">确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getData,
  addData,
  delData,
  gainData,
  upData,
  referData,
  data
} from '@/api/discountCoupon/universal'
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        amt: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
        use_restrictions: [{ required: true, message: '限制不能为空', trigger: 'blur' }],
        use_date: [{ required: true, message: '期限不能为空', trigger: 'blur' }],
        tot_issued: [{ required: true, message: '限制不能为空', trigger: 'blur' }],
        quantity_issued: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
      },
      data: {
        name: '',
        use_restrictions: ''
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      formData: {
        name: '',
        amt: '',
        use_restrictions: '',
        use_date: '',
        tot_issued: '',
        quantity_issued: ''
      },
      dialogTableVisible: false,
      tableData: [],
      multipleSelection: []
    }
  },
  computed: {
    disabled() {
      if (this.formData.id) {
        return true
      } else {
        return false
      }
    },
    showText() {
      return this.formData.id ? '编辑优惠券' : '新增优惠券'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    changePage(newPage) {
      this.page.page = newPage
      this.data = {
        name: '',
        use_restrictions: ''
      }
      this.getData()
    },
    sizeChange(size) {
      this.page.pagesize = size
      this.data = {
        name: '',
        use_restrictions: ''
      }
      this.getData()
    },
    async refer() {
      const res = await referData(this.data)
      this.tableData = res.data
    },
    reset() {
      this.getData()
      this.data = {
        name: '',
        use_restrictions: ''
      }
    },
    btnOK() {
      this.$refs.form
        .validate()
        .then(async(isOK) => {
          if (isOK) {
            if (this.formData.id) {
              await upData(this.formData)
            } else {
              await addData(this.formData)
            }
          }
        })
        .then(() => {
          this.dialogTableVisible = false
          if (this.formData.id) {
            this.$message.success('编辑成功')
          } else {
            this.$message.success('添加成功')
          }
          this.data = {
            name: '',
            use_restrictions: ''
          }
          this.getData()
        })
    },
    async getData() {
      const res = await getData()
      const arr = await data(this.page)
      this.tableData = arr.data
      this.page.total = res.total
    },
    async edit(id) {
      const res = await gainData(id)
      this.formData = res.data
      this.dialogTableVisible = true
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(
        async() => {
          await delData(id)
          this.$message.success('删除成功')
          this.getData()
        }
      )
    },
    addData() {
      this.dialogTableVisible = true
    },
    changeDialog() {
      this.$refs.form.resetFields()
      this.dialogTableVisible = false
      this.formData = {
        name: '',
        amt: '',
        use_restrictions: '',
        use_date: '',
        tot_issued: '',
        quantity_issued: ''
      }
    }
  }
}
</script>
<style lang="scss">
.app-container {
  min-width: 1200px;
}
.el-card:first-child {
    margin-bottom: 10px;
}
.el-input--suffix {
  margin-right: 20px;
}
.el-card:first-child{
  margin-bottom: 20px;
}
</style>
